<template>
  <li>
    <header>条件渲染</header>
    <ul>
      <li>
        v-if
        <ol>
          <li>在&lt;template&gt;元素上使用v-if条件渲染分组</li>
          <li>v-else</li>
          <li>v-else-if</li>
          <li>用key管理可复用的元素</li>
        </ol>
        <vif/>
        <velse/>
        <velseif/>
        <vkey v-bind:type="value"/>
        <button v-on:click="onChange">切换登陆类型</button>
      </li>
      <li>
        v-show
        <vshow/>
      </li>
      <li>v-if vs v-show</li>
      <li>v-if与v-for一起使用</li>
    </ul>
  </li>
</template>

<script>
import Vif from "./samples/Vif";
import Velse from "./samples/Velse";
import Velseif from "./samples/Velseif";
import Vkey from "./samples/Vkey";
import Vshow from "./samples/Vshow";

export default {
  name: "Conditional",
  components: { Vif, Velse, Velseif, Vkey, Vshow },
  data() {
    return {
      value: "username"
    };
  },
  methods: {
    onChange() {
      if (this.value === "username") {
        this.value = "email";
      } else {
        this.value = "username";
      }
    }
  }
};
</script>